<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList"
		:loading-more-custom-style="{ paddingBottom: 'env(safe-area-inset-bottom)' }">
		<template #top>
			<view class="zpagin_top">
				<nav-bar :iconLeft="true" />
				<view class="search">
					<custom-search v-model="queryParams.search" @search="refreshList" placeholder="请输入设备名称/设备编号" />
					<uni-data-select style="z-index: 50;" placeholder="请选择设备类型" v-model="queryParams.status"
						:localdata="classify_list" @change="refreshList" />
				</view>
				<dui-float-ball :pathUrl="`${pageUrl}/compile`" v-if="$hasPerm(['110301'])" />
			</view>
		</template>
		<up-swipe-action>
			<up-swipe-action-item v-for="item in dataList" :key="item.id" :item-data="item"
				:name="JSON.stringify(swipeActPer(options, item.status_display)) + '&' + item.code + '&' + item.id + '&' + item.device_name"
				:options="swipeActPer(options, item.status_display)" @click="action">
				<uni-card margin="0" spacing="0" @click="goDetail(item, pageUrl, '110304')">
					<template v-slot:title>
						<uni-list>
							<uni-list-item :title="item.code" :note="item.device_name" thumbSize="lg">
								<template v-slot:footer>
									<up-tag size="mini" :text="status_list[item.status_display].text" plain plainFill
										:type="status_list[item.status_display].type" />
								</template>
							</uni-list-item>
						</uni-list>
					</template>
					<view class="ctent">维修主题：{{ item.title }}</view>
					<view class="ctent">创建时间：{{ item.create_date }}</view>
					<view class="con">
						<view class="ctent">提交人：{{ item.create_full_name }}</view>
						<view class="ctent">接单人：{{ item.task_full_name }}</view>
					</view>
					<view class="ctent">接单时间：{{ item.task_date }}</view>
					<view class="con" style="align-items: normal;">
						<view class="ctent" style="flex: none;">备注：</view>
						<view class="ctent">{{ item.desc }}</view>
					</view>
					<view class="con_button" v-if="$hasPerm(['50105'])"
						v-show="item.status_display == '维修中' || item.status_display == '待接单'"
						@click.stop="hanldAct(item.id, 4, '取消成功')"> 取
						消
					</view>
				</uni-card>
			</up-swipe-action-item>
		</up-swipe-action>
	</z-paging>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import deRepairApi from '../../../api/device/de_repair'
import { goDetail, swipeActPer } from '@/utils/permission'

//作用于新增或编辑后刷新页面数据
uni.$bus.useBusOn('de_repair', refreshList);

//页面header标题

const classify_list = [
	{ text: "待接单", value: 1 },
	{ text: "维修中", value: 2 },
	{ text: "已完成", value: 3 },
	{ text: "已取消", value: 4 },
]
const status_list = {
	'待接单': { text: '待接单', type: 'primary' },
	'维修中': { text: '维修中', type: 'warning' },
	'已完成': { text: '已完成', type: 'success' },
	'已取消': { text: '已取消', type: 'error' },
}
//滑动单元格按钮
const options = [
	{
		text: '修改', per: '110302',
		style: {
			backgroundColor: '#0081ff',
		}
	}, {
		text: '删除', per: '110303',
		style: {
			backgroundColor: '#f56c6c'
		}
	}
];
//页面跳转路径
const pageUrl = '/views/device/de_repair';

//查询参数
const queryParams = reactive({
});

//获取paging实例
const paging = ref(null)
const dataList = ref([])
//列表数据方法
function queryList(pageNo, pageSize) {
	const params = {
		page: pageNo,
		page_size: pageSize,
		...queryParams
	}
	deRepairApi.get_repair(params).then((res) => {
		paging.value?.complete(res.results);
	})
}

function hanldAct(id, key, text) {
	uni.showModal({
		title: '提示',
		content: '确定要取消吗？',
		success: (res) => {
			if (res.confirm) {
				deRepairApi.patch_repair({ status: key }, id).then(() => {
					uni.$u.toast(text)
					refreshList();
				})
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}


//滑动操作按钮
function action(v) {
	const options = JSON.parse(v.name.split("&")[0])
	const code = v.name.split("&")[1]
	const id = v.name.split("&")[2]
	const name = v.name.split("&")[3]
	const index = v.index
	if (options[index].text == '修改') {
		uni.navigateTo({
			url: `${pageUrl}/compile?type=edit&id=${id}`
		})
	}
	if (options[index].text == '删除') {
		delete_type(code, id, name)
	}
};

//删除操作
function delete_type(code, id, name) {
	uni.showModal({
		title: '提示',
		content: `确认要删除编号为【${code}】的设备维修吗？`,
		success: (res) => {
			if (res.confirm) {
				deRepairApi.delete_repair(id).then((res) => {
					uni.$u.toast('删除成功')
					setTimeout(() => {
						refreshList();
					}, 500)
				})
			}
		}
	});
};

//刷新列表数据方法
function refreshList() {
	paging.value?.reload()
};
</script>

<style lang="scss"></style>